import React from 'react'
import '../../assets/css/profile/login.less'
import { Toast,Switch} from 'antd-mobile';
import 'whatwg-fetch'
import 'antd-mobile/lib/toast/style/css'
import 'antd-mobile/lib/switch/style/index.css'
import store from "../../store";
import {connect} from 'react-redux'
// import { List, Switch } from 'antd-mobile';
 class LoginComponents extends React.Component{
    constructor(props){
        console.log(props.state.login);
        super(props)
        this.state={
            checked:false,
            phone:'',
            pwd:'',
        }
    }
    //登录成功
    succeedLogin(res){
        localStorage['login'] = 'true'
        localStorage['uid'] = res.data.uid
        // localStorage['nickname'] = res.data.nickname
        // localStorage['utype'] = res.data.utype
        // localStorage['auth_token'] = res.data.auth_token
        store.dispatch({type:'login',value:localStorage['login']})
        console.log(store.getState());
        this.props.history.push('/')
    }
    //登录请求
    getUser(){
        const parmas = new URLSearchParams()
        parmas.append('cellphone',this.state.phone)
        parmas.append('password',this.state.pwd)
        fetch('http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f',{
            method:'POST',
            body:parmas
        }).then((res)=>res.json())
            .then((res)=>{
                if(res.code===200){
                    console.log(res);
                    Toast.success('登录成功', 1);
                    //登录成功，跳转
                   this.succeedLogin(res)
                }
            })
    }
    //登录验证
    login(){
        if(this.state.phone===''){
                Toast.info('请输入手机号', 1, null, false);
                return
        }
        if(!(/^1[3456789]\d{9}$/.test(this.state.phone))){
                Toast.info('您输入的手机号格式不正确', 1,null,false);
            return ;
        }
        if(this.state.pwd===''){
                Toast.info('请输入密码', 1,null,false);
            return ;
        }
        this.getUser()
    }
    goBack(){
        this.props.history.goBack()
    }
    goReg(){
        this.props.history.push('/reg')
    }
    render() {
        return(
            <div id='login'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>会员登录</div>
                    <div></div>
                </div>
                <div className='input-bar'>
                    <div className='phone'>
                        <input type="text" placeholder='手机号' onChange={(e)=>{
                            this.setState({phone:e.target.value})
                        }}/>
                    </div>
                    <div className='password'>
                        <input type={this.state.checked?'text':'password'} placeholder='密码' onChange={(e)=>{
                            this.setState({
                                pwd:e.target.value
                            })
                        }}/>
                        <Switch
                            checked={this.state.checked}
                            onChange={() => {
                                this.setState({
                                    checked: !this.state.checked,
                                });
                            }}
                        />
                    </div>
                    <div className='login-btn' onClick={this.login.bind(this)}>登录</div>
                    <div className='get-pwd'>
                        <div>
                            <div>
                                <img src="" alt=""/>
                            </div>
                            <div>忘记密码</div>
                        </div>
                        <div onClick={this.goReg.bind(this)}>
                            <div>
                                <img src="" alt=""/>
                            </div>
                            <div>快速注册</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state
    }
})(LoginComponents)